<template>
  <view class="container">
    <view v-show="!showLogining">
      <view class="auth-header">
        <view class="auth-logo">
          <u-avatar size="100" icon="github-circle-fill" fontSize="100"></u-avatar>
        </view>
      </view>

      <view class="auth-box">
        <u--form labelPosition="left" :model="formData" :rules="rules" ref="form">
          <u-form-item label="手机号" prop="mobile" labelWidth="60" borderBottom ref="item-mobile">
            <u-input type="number" maxlength="11" v-model="formData.mobile" clearable placeholder="请填写手机号"
              border="none"></u-input>
          </u-form-item>
          <u-gap height="20"></u-gap>
          <u-form-item label="验证码" prop="code" labelWidth="60" borderBottom>
            <u--input type="number" maxlength="4" v-model="formData.code" border="none" placeholder="请填写验证码"></u--input>
            <u-button slot="right" @click="getCode" :text="codeTips" type="success" size="mini"
              :disabled="codeDisabled"></u-button>
            <u-code ref="uCode" unique-key="login-code" @change="codeChange" seconds="60" @start="codeDisabled = true"
              keepRunning @end="codeDisabled = false"></u-code>
          </u-form-item>
          <view class="btn-group">
            <u-button class="auth-btn" type="primary" customStyle="margin-top: 50px"
              @click="handleSubmit">立即登录</u-button>
          </view>
        </u--form>
      </view>
    </view>
    <view v-show="showLogining" class="warp">
      加载中...
    </view>
  </view>
</template>

<script>
  import {
    sendSmsCode,
    smsLogin
  } from '../../api/auth';
  import * as jweixin from '@/utils/jweixin.js';
  import config from '@/common/config';
  export default {
    data() {
      return {
        codeDisabled: false,
        codeTips: '',
        code: '',
        showLogining: true,
        formData: {
          mobile: '',
          code: ''
        },
        rules: {
          mobile: [{
              type: 'integer',
              required: true,
              message: '请填写手机号',
              trigger: ['blur', 'change']
            },
            {
              // 自定义验证函数，见上说明
              validator: (rule, value, callback) => {
                // 上面有说，返回true表示校验通过，返回false表示不通过
                // uni.$u.test.mobile()就是返回true或者false的
                return uni.$u.test.mobile(value)
              },
              message: '手机号码不正确',
              // 触发器可以同时用blur和change
              trigger: ['change', 'blur']
            }
          ],
          code: {
            type: 'integer',
            len: 4,
            required: true,
            message: '请填写4位验证码',
            trigger: ['blur', 'change']
          }
        }
      }
    },
    onLoad() {
      if (this.code) {
        this.showLogining = false;
      }
      jweixin.getWxCode().then(code => {
        console.log("获取code sucess")
        this.code = code;
        this.showLogining = false;
      })

    },
    //去掉顶部左侧返回按钮
    mounted() {
      var a = document.getElementsByClassName('uni-page-head-hd')[0]
      a.style.display = 'none';
    },
    onReady() {
      // 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
      this.$refs.form.setRules(this.rules)

    },
    methods: {
      codeChange(text) {
        this.codeTips = text
      },
      getCode() {
        const mobile = this.formData.mobile
        if (!mobile) {
          uni.$u.toast('请填写手机号')
        } else if (!uni.$u.test.mobile(mobile)) {
          uni.$u.toast('手机号格式不正确')
        } else if (this.$refs.uCode.canGetCode) {
          // 模拟向后端请求验证码
          uni.showLoading({
            title: '正在获取验证码'
          })
          //scene:1登陆获取验证码场景
          sendSmsCode({
            mobile: mobile,
            scene: 1,
            appId: config.appId
          }).then(res => {
            //console.log(res)
            uni.hideLoading()
            uni.$u.toast('验证码已发送')
            // 通知验证码组件内部开始倒计时
            this.$refs.uCode.start()
          })
        } else {
          uni.$u.toast('倒计时结束后再发送')
        }
      },
      handleSubmit() {
        this.$refs.form.validate().then(res => {
          let data = this.formData
          data.socialType = 31;
          data.socialCode = this.code;
          data.socialState = 0;
          data.appId = config.appId;
          console.log('data' + JSON.stringify(data))
          this.mobileLogin(data)
        })
      },
      mobileLogin(data) {
        this.$store.dispatch('Login', {
          data: data
        }).then(res => {
          uni.$u.toast('登录成功')
          uni.redirectTo({
            url: '/pages/pinche/pinche'
          })
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .warp {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .auth-header {
    height: 400rpx;
    @include flex-center;

    .auth-logo {
      @include flex-center(column);
    }
  }

  .auth-box {
    @include flex-center(column);

    .btn-group {
      width: 600rpx;

      .auth-btn {
        height: 90rpx;
        font-size: 32rpx;
      }
    }
  }
</style>